<template>
    <view class="container flex">
        <view class="tabs">
            <u-tabs :current="cate" :list="cates" @click="changeCate" lineColor="#F3F3F3" :activeStyle="{color:'#965E25',fontSize:'32rpx'}"></u-tabs>
        </view>
        <view class="main">
            <template v-if="menuList.length > 0">
                <scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="toBottom">
                    <custom-waterfalls-flow ref="waterfallsFlowRef" :value="menuList" :column="2" @imageClick="goDetail">
                        <view class="item" v-for="(item,index) in menuList" :key="index" slot="slot{{index}}">
                            <view class="title">{{item.name||''}}</view>
                        </view>
                    </custom-waterfalls-flow>
                </scroll-view>
            </template>
        </view>
    </view>
</template>

<script>
import menu from './menu'
export default {
    data() {
        return {
            cate: 0,
            cates: [{
                name: '热菜',
                id: '0',
                key: 'hotlist'
            }, {
                name: '凉菜',
                id: '1',
                key: 'coolList'
            }],
            menuList: []
        }
    },
    onLoad(opt) {
        this.menuList = menu[this.cates[this.cate].key]
    },
    onReachBottom() {

    },
    methods: {
        changeCate(e) {
            console.log(e);
            this.cate = e.index
            this.menuList = []
            setTimeout(() => {
                this.menuList = menu[this.cates[this.cate].key]
            }, 100)
        },
        goDetail(e, a) {
            uni.navigateTo({
                url: '/pages/tabbar/menuDetail?key=' + this.cates[this.cate].key + '&index=' + e.index
            })
        },
        toBottom(e) {
            console.log(e);
        }
    }
}
</script>

<style scoped lang="scss">
.container {
    background: #f3f3f3;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.tabs {
    padding: 20rpx 0;
    width: 100%;
}

.main {
    width: 94%;
    flex: 1;
    height: 100%;
    overflow-y: scroll;
    margin: 0 auto;
    background: #f3f3f3;

    .title {
        font-size: 28rpx;
        color: #3d3d3d;
        padding: 15rpx 20rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .desc {
        color: #7c7c7c;
        font-size: 24rpx;
        padding: 0 20rpx 15rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}
</style>